<!-- Dom模板 -->
<template>
  <div class="lec">
    <!-- Dom内容 -->
    <div class="lecturer">
      <!-- Dom内容 -->
      <p>讲师</p>
      <Header @filtrate="filtrate">
        <template v-slot:tit>
          <p class="header_tit">讲师筛选</p>
        </template>
      </Header>

      <div class="lecturerTable">
        <div class="lecturer_header">
          <span>讲师列表</span>
          <el-button
            class="lecturer_add_btn"
            @click="lecturerLayer"
            type="primary"
            >添加讲师</el-button
          >
        </div>
        <!-- 列表 -->
        <el-table
          max-height="300"
          :data="
            newLecturer.slice(
              (Number(pageIndex) - 1) * Number(pages),
              Number(pageIndex) * Number(pages)
            )
          "
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="teacher" label="讲师名称" width="90">
          </el-table-column>

          <el-table-column prop="img" label="讲师头像" width="150">
            <!-- 头像 -->
            <template slot-scope="scope">
              <img class="lecturer_src" :src="scope.row.teacherImg" />
            </template>
          </el-table-column>

          <el-table-column prop="trait" label="讲师简介" width="300">
          </el-table-column>
          <el-table-column prop="theHeir" label="上传人" width="120">
            <template>你猜</template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="300">
            <template>{{new Date().toLocaleDateString()}}</template>
          </el-table-column>

          <el-table-column label="操作" width="122">
            <template slot-scope="scope">
              <el-button
                class="compile"
                type="text"
                size="small"
                @click="EditBisounced(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                class="delete"
                @click="deleteBtn(scope.row.id)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Paging
          v-if="newLecturer.length > 0"
          :tableData="newLecturer.length"
          :pagesize="pages"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
          :currentPage="pageIndex"
        />
      </div>
    </div>
    <!-- 添加弹框 -->
    <Layer :layerIsShow="this.layerIsShow" v-if="isShow">
      <p>请填写讲师相关信息</p>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="讲师名称">
          <el-input class="inp" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="讲师头像">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- :http-request="uploadFile" -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <p>上传照片</p>
          </el-upload>
          <div class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input class="inp" v-model="form.intro"></el-input>
        </el-form-item>
        <el-form-item label="详细介绍">
          <el-input type="textarea" v-model="form.introduction"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addonSubmit()">立即添加</el-button>
          <el-button @click="layerIsShow()">取消</el-button>
        </el-form-item>
      </el-form>
    </Layer>

    <!-- 编辑弹框 -->
    <Layer
      class="layerr"
      :layerIsShow="this.layerIsShow"
      v-if="isEditBisounced"
    >
      <div class="cover">
        <div class="layer_cover_Con">
          <el-form ref="form" label-width="80px">
            <el-form-item label="用户昵称">
              <el-input v-model="name"></el-input>
            </el-form-item>

            <el-form-item label="个人风格">
              <el-input v-model="trait"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmitClick">保存</el-button>
              <el-button @click="isEditBisouncedShow()">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </Layer>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Layer from "../layer";
import Header from "../header";
import Paging from '../../../../components/paging/index.vue'
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      userLecturer: [],
      pages: 5,
      pageIndex: 1,
      isShow: false,
      form: {
        name: "",
        desc: "",
        intro: "",
        introduction: "",
      },
      imageUrl: "",
      newLecturer: [],
      trait: "",
      name: "",
      id: "",
      isEditBisounced: false,
    };
  },
  components: {
    Layer,
    Header,
    Paging
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.getLecturer();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getTeacherData()

  },
  // Vue方法定义
  methods: {
    // 获取数据
    async getLecturer() {
      let res = await this.$axios.get("/api/user/userLecturer");
      this.userLecturer = res.data;
      // this.newLecturer = res.data;
    },
    // 获取讲师总数据
    async getTeacherData(){
      let res = await this.$axios.get('/api/users/lecture');
      this.userLecturer = res.data;
      this.newLecturer = res.data
    },
    // 每页显示数量
    handleSizeChange(val) {
      this.pages = val;
    },
    // 页码
    handleCurrentChange(val) {
      this.pageIndex = val;
    },
    // 显示弹框
    lecturerLayer() {
      this.isShow = true;
    },
    // 隐藏弹框
    layerIsShow() {
      this.isShow = false;
    },
    isEditBisouncedShow() {
      this.isEditBisounced = false;
      this.layerIsShow();
    },
    // 编辑弹框
    EditBisounced(id) {
      this.isEditBisounced = true;
      console.log(this.isEditBisounced);
      this.isShow = true;
      this.id = id;
      let arr = this.userLecturer.filter((item) => {
        return item.id === id;
      })[0];
      this.name = arr.teacher;
      this.trait = arr.trait;
    },
    // 保存
    onSubmitClick() {
      this.$axios.post("/api/user/upDatelecturer", {
        id: this.id,
        teacher: this.name,
        trait: this.trait,
      }).then(() => {
        this.getTeacherData()
        this.isEditBisouncedShow();
        this.layerIsShow();
      })
    },
    // 添加讲师
    addonSubmit() {
      let obj={
        id:parseInt(this.newLecturer[this.newLecturer.length - 1].id) + 1,
        teacherImg:'https://wx3.sinaimg.cn/mw2000/006WxrJMly1gvu2prala9j308w06t0sl.jpg',
        publicity:'听别人的逆袭故事，悟自己的精彩人生',
        teacher:this.form.name,
        position:'["高级副总裁","培训总监"]',
        certification:'2019110014200234234',
        experience:'2015.04-至今振涛教育人工部培训总监',
        trait:this.form.introduction,
        leftTitle:this.form.intro,
        teacherClassList:'[]'
      }
      this.$axios.post("/api/user/addlecture",obj).then(()=>{
          this.getTeacherData()
      this.layerIsShow();
      })
    
    },
    // 删除
    deleteBtn(id) {
      this.$axios.post("/api/user/deletelecturer", {id}).then(() => {
        this.getTeacherData()
      });
    },
    // 筛选
    filtrate(res) {
      this.newLecturer = this.userLecturer.filter((item) => {
        return item.teacher.includes(res)
      });
    },
    // 获取图片地址
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片筛选
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.lec {
  position: relative;
}
p {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.lecturer {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 60px;
}
.lecturerTable {
  width: 100%;
  min-height: 450px;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  padding: 0 30px;
}
.lecturer_header {
  height: 64px;
  width: 100%;
  text-align: right;
  line-height: 64px;
}
.lecturer_add_btn {
  background: #38a28a;
  border: 1px solid #38a28a;
}
.lecturer_header span {
  float: left;
}
.lecturer_src {
  width: 45px;
  height: 45px;
}
.lecturer_footer {
  display: flex;
  height: 80px;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  background: #fff;
  padding: 0 30px;
}

.lecturer_rig li.active {
  color: #38a28a !important;
}
.compile {
  color: #38a28a;
}
.delete {
  color: #f44235;
}
.Excel {
  color: #38a28a;
  font-size: 14px;
  margin: 0 0 0 30px;
}
.inp {
  width: 30%;
}
.avatar-uploader {
  border: 1px dashed #bebebe !important;
  width: 100px;
  border-radius: 6px;
  overflow: hidden;
  height: 100px;
  margin: none;
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
}
.el-upload p {
  position: absolute;
  width: 100px;
  height: 30px;
  line-height: 30px;
  bottom: 60px;
  left: 0;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  position: relative;
  width: 100px;
  height: 100px;
  display: block;
  z-index: 5000;
}

.cover {
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.layer_cover_Con {
  width: 60%;
  height: 50%;
  box-sizing: border-box;
  padding: 100px;
  background: #fff;
  position: absolute;
  left: 20%;
  top: 20%;
}
</style>